<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像去雾处理</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <h1 class="mb-4">欢迎，{{ session.username }}！</h1>
                <a href="{{ url_for('logout') }}" class="btn btn-outline-danger">注销</a>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>上传图像</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data" action="{{ url_for('process') }}" id="uploadForm">
                            <div class="mb-3">
                                <input type="file" name="file" id="fileInput" class="form-control" accept="image/*" required>
                            </div>
                            <div class="mb-3">
                                <select name="algorithm" class="form-select">
                                    <option value="DCP">暗通道先验算法</option>
                                    <option value="fastDCP">快速暗通道先验算法</option>
                                    <option value="AODnet">AODnet 算法</option>
                                    <option value="Dehazeformer">Dehazeformer 算法</option>
                                    <option value="DehazeNet">DehazeNet 算法</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">开始处理</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {% if original_image %}
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>原始图像</h3>
                    </div>
                    <div class="card-body text-center">
                        <img src="{{ original_image }}" alt="原始图像" class="img-fluid" style="max-width: 500px;">
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% if processed_image %}
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>处理后的图像</h3>
                    </div>
                    <div class="card-body text-center">
                        <img src="{{ processed_image }}" alt="处理后的图像" class="img-fluid" style="max-width: 500px;">
                        <p class="mt-3">处理算法：{{ algorithm }}</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</body>
</html>